<template>
  <div class="account-contact">
    <ul class="contact-account-list">
    	<li class="account-facebook">
    	  <div class="account-title">Facebook</div>
    	  <p class="account-tip-success" v-if="isGetData && facebook">{{ $t('message.completeAndFacebookAccountIs') }}{{ facebook }}</p>
    	  <p class="error-tips" v-if="isGetData && !facebook">{{ $t('message.notBoundFacebookAccount') }}</p>
    	  <div class="account-btn-group" v-if="isGetData">
    	  	<button type="button" class="btn-gray" v-if="facebook" @click="edit('facebook')">{{ $t('message.personalAccountEdit') }}</button>
    	  	<button type="button" class="btn-gray" v-if="!facebook" @click="set('facebook')">{{ $t('message.personalAccountSet') }}</button>
    	  </div>
    	</li>
    	<li class="account-instagram">
    	  <div class="account-title">Instagram</div>
    	  <p class="account-tip-success" v-if="isGetData && instagram">{{ $t('message.completeAndInstagramAccountIs') }}{{ instagram }}</p>
    	  <p class="error-tips" v-if="isGetData && !instagram">{{ $t('message.notBoundInstagramAccount') }}</p>
    	  <div class="account-btn-group" v-if="isGetData">
          <button type="button" class="btn-gray" v-if="instagram" @click="edit('instagram')">{{ $t('message.personalAccountEdit') }}</button>
          <button type="button" class="btn-gray" v-if="!instagram" @click="set('instagram')">{{ $t('message.personalAccountSet') }}</button>
        </div>
    	</li>
    </ul>
    <!--修改弹出框-->
    <v-dialog v-if="isShow">
      <div class="contact-dialog">
        <div class="dialog-title">{{ type === 'facebook' ? $t('message.editFacebookAccount') : $t('message.editInstagramAccount') }}</div>
        <div class="dialog-content">
          <div class="dialog-label">{{ type === 'facebook' ? $t('message.facebookAccount') : $t('message.instagramAccount') }}：</div>
          <input type="text" class="dialog-input" v-model.trim="changeAccount" />
          <div class="dialog-error" v-if="isShowError"><div class="error-tips">{{ $t('message.inputError') }}</div></div>
          <div class="dialog-btn-group clearfix">
            <button type="button" class="btn-orange" @click="save">{{ $t('message.save') }}</button>
            <button type="button" class="btn-white" @click="cancel">{{ $t('message.cancel') }}</button>
          </div>
        </div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import VDialog from '@/components/base/VDialog'
export default {
  name: 'PersonAccountContact',
  components: {
    VDialog
  },
  data () {
    return {
      isGetData: false,
      facebook: '',
      instagram: '',
      isShow: false,
      type: '',
      changeAccount: '',
      isShowError: false
    }
  },
  watch: {
    changeAccount (val) {
      this.isShowError = false
    }
  },
  methods: {
    // 获取facebook和instagram账号
    getSocialAccount () {
      this.$ajax.getUserInfo().then((res) => {
        if (res.code === 200) {
          this.isGetData = true
          this.facebook = res.data.facebook
          this.instagram = res.data.instagram
//        this.facebook = 'Sammy'
//        this.instagram = 'Sammy_88'
        }
      })
    },
    // 设置或修改facebook或instagram账号
    changeSocialAccount () {
      this.$ajax.changeSocialAccount({
        type: this.type,
        text: this.changeAccount
      }).then((res) => {
        if (res.code === 200) {
          this[this.type] = this.changeAccount
          this.cancel()
        }
      })
    },
    edit (type) {
      this.isShow = true
      this.type = type
      this.changeAccount = this[type]
    },
    set (type) {
      this.isShow = true
      this.type = type
    },
    save () {
      if (this.changeAccount === '') {
        this.isShowError = true
        return
      }
      if (this[this.type] === this.changeAccount) {
        this.cancel()
        return
      }
      this.changeSocialAccount()
    },
    cancel () {
      this.isShowError = false
      this.type = ''
      this.changeAccount = ''
      this.isShow = false
    }
  },
  created () {
    this.getSocialAccount()
  }
}
</script>

<style scoped>
.contact-account-list {
  
}

.contact-account-list li {
  height: 53px;
  padding: 40px 0 40px 70px;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
}

.contact-account-list li:last-child {
  border-bottom: 0;
}

.account-facebook {
  background: url(../../../assets/images/personal/contact/icon_facebook.png) no-repeat left center;
}

.account-instagram {
  background: url(../../../assets/images/personal/contact/icon_instagram.png) no-repeat left center;
}

.account-title {
  line-height: 25px;
  font-size: 18px;
  font-weight: bold;
}

.account-tip-success {
  line-height: 20px;
  color: #a5a5a5;
  margin-top: 8px;
}

.account-btn-group {
  position: absolute;
  top: 47px;
  right: 0;
}

.account-btn-group button {
  width: 100px;
  height: 40px;
  cursor: pointer;
}

.contact-dialog {
  width: 496px;
  height: 316px;
  padding: 40px 0;
  box-sizing: border-box;
  background-color: #fff;
}

.dialog-title {
  line-height: 28px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.dialog-content {
  width: 416px;
  margin: 40px auto 0;
}

.dialog-label {
  line-height: 20px;
}

.dialog-input {
  width: 416px;
  height: 48px;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  padding: 0 16px;
  margin-top: 12px;
  box-sizing: border-box;
}

.dialog-error {
  position: relative;
}

.dialog-error .error-tips {
  position: absolute;
}

.dialog-btn-group {
  margin-top: 40px;
  font-size: 0;
}

.dialog-btn-group button {
  float: left;
  width: 200px;
  height: 48px;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 16px;
}

.dialog-btn-group button:last-of-type {
  margin-right: 0;
}
</style>